<template>
  <div class="container">
    <div class="title">欢迎登录</div>
    <div class="imgBox">
      <img src="@/assets/微信图片_20250321142511.png" alt="" class="indexImg" />
    </div>
    <div class="formBox">
      <div class="formItem">
        <div class="label">账号 :</div>
        <div>
          <input
            type="text"
            placeholder="请输入账号"
            v-model="formInfo.account"
          />
        </div>
      </div>
      <div class="formItem">
        <div class="label">密码 :</div>
        <input
          type="password"
          placeholder="请输入密码"
          v-model="formInfo.password"
        />
      </div>
    </div>
    <div class="confirm" @click="login">登录</div>
    <div class="notice">忘记密码可与后台管理员联系</div>
  </div>
</template>

<script>
import { loginApi } from '@/api/index'
export default {
  name: 'loginPage',
  props: {},
  components: {},
  data() {
    return {
      formInfo: {
        account: '',
        password: '',
      },
    }
  },
  methods: {
    async login() {
      //  console.log(this.formInfo)
      const res = await loginApi({
        userName: this.formInfo.account,
        password: this.formInfo.password,
      })
      //  console.log(res);
      if (res.code == 0) {
        sessionStorage.setItem('loginInfo', JSON.stringify(res.data))
        this.$store.commit('storeToken', res.data)
        this.$router.push('/index')
      }
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(180deg, #e6f8ee 0%, #f5f7f6 100%);
}
.title {
  padding-top: 12px;
  padding-bottom: 45px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
.imgBox {
  text-align: center;
  .indexImg {
    width: 94px;
    height: 94px;
  }
}
.formBox {
  padding-top: 56px;
  .formItem {
    margin: 0 auto;
    width: 280px;
    height: 44px;
    background: #ffffff;
    box-shadow: 0px 3px 6px 1px rgba(15, 59, 128, 0.06);
    border-radius: 24px;
    border: 1px solid #edf2fb;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 24px;
    .label {
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      line-height: 44px;
    }
    input {
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
    }
  }
}
.confirm {
  width: 280px;
  height: 44px;
  background: linear-gradient(270deg, #00a441 0%, #00c77d 100%);
  border-radius: 90px;
  color: #ffffff;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  margin: 0 auto;
  margin-top: 60px;
}
.notice {
  margin-top: 20px;
  font-weight: 400;
  font-size: 10px;
  color: #93979c;
  width: 100%;
  text-align: center;
}
</style>
